<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进程列表</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-message-box {
            width: auto !important;
            overflow: scroll;
            max-height: 100%;
        }
    </style>
</head>

<body>
<div id="app">
    <el-table
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%;">
        <el-table-column
                fixed
                align="center"
                prop="pid"
                sortable
                label="进程ID">
        </el-table-column>
        <el-table-column
                prop="processName"
                align="center"
                sortable
                label="进程名">
        </el-table-column>
        <el-table-column
                sortable
                align="center"
                label="cpu使用百分比%">
            <template slot-scope="scope">
                <el-tag>{{(scope.row.cpuUse).toFixed(2)}}%</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                sortable
                label="文件打开数">
            <template slot-scope="scope">
                <el-tag @click="loadFiles(scope.row.processName,scope.row.pid)">{{scope.row.fileSize}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                sortable
                label="网络连接数">
            <template slot-scope="scope">
                <el-tag @click="loadNet(scope.row.processName,scope.row.pid)">{{scope.row.netConnSize}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                sortable
                prop="threadSize"
                label="线程打开数">
        </el-table-column>

        <el-table-column
                align="center"
                sortable
                label="内存信息"
                width="800">
            <template slot-scope="scope">
                <div v-if="scope.row.memoryInfoStat">
                    <el-tag type="success">vms:{{(scope.row.memoryInfoStat.vms / 1024 / 1024).toFixed(2)}} MB</el-tag>
                    <el-tag type="warning">rss:{{(scope.row.memoryInfoStat.rss / 1024 / 1024).toFixed(2)}} MB</el-tag>
                    <el-tag type="success">hwm:{{(scope.row.memoryInfoStat.hwm / 1024 / 1024).toFixed(2)}} MB</el-tag>
                    <el-tag type="info">locked:{{(scope.row.memoryInfoStat.locked / 1024 / 1024).toFixed(2)}} MB
                    </el-tag>
                    <el-tag type="danger">stack:{{(scope.row.memoryInfoStat.stack / 1024 / 1024).toFixed(2)}} MB
                    </el-tag>
                    <el-tag>swap:{{(scope.row.memoryInfoStat.swap / 1024 / 1024).toFixed(2)}} MB</el-tag>
                    <el-tag>data:{{(scope.row.memoryInfoStat.data / 1024 / 1024).toFixed(2)}} MB</el-tag>
                </div>
                <div v-else>
                    <el-tag type="success">vms:0 MB</el-tag>
                    <el-tag type="warning">rss:0 MB</el-tag>
                    <el-tag type="success">hwm:0 MB</el-tag>
                    <el-tag type="info">locked:0 MB
                    </el-tag>
                    <el-tag type="danger">stack:0 MB
                    </el-tag>
                    <el-tag>swap:0 MB</el-tag>
                    <el-tag>data:0 MB</el-tag>
                </div>
            </template>
        </el-table-column>

        <el-table-column
                align="center"
                sortable
                label="创建时间">
            <template slot-scope="scope">
                <el-tag>{{timestampToTime(scope.row.createTime)}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">详情查看</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            loading: false,
            tableData: []
        },
        mounted() {
            this.loadProcess()
        },
        methods: {
            timestampToTime(timestamp) {
                var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                return Y + M + D + h + m + s;
            },
            loadProcess() {
                this.loading = true
                const that = this
                $.get("/process", function (data, status) {
                    that.loading = false
                    that.tableData = data
                });
            },
            loadFiles(name, pid) {
                const that = this
                $.get("/process/openFiles?pid=" + pid, function (data, status) {
                    if (data) {
                        let html = ""
                        for (let a of data) {
                            html = html + "<div>fd:" + a.fd + " 文件路径 " + a.path + "</div>"
                        }
                        that.$alert(html, name + ' 打开的文件信息', {
                            dangerouslyUseHTMLString: true
                        });
                    }
                });
            },
            loadNet(name, pid) {
                const that = this
                $.get("/process/openNet?pid=" + pid, function (data, status) {
                    if (data) {
                        let html = ""
                        for (let a of data) {
                            if (a.localaddr && a.remoteaddr) {
                                html = html + "<div>本地占用 :" + a.localaddr.ip + ":" + a.localaddr.port + " 远端占用:" + a.remoteaddr.ip + ":" + a.remoteaddr.port + "</div>"
                            }
                        }
                        that.$alert(html, name + ' 打开的网络信息', {
                            dangerouslyUseHTMLString: true
                        });
                    }
                });
            },
        }
    })
</script>

</html>